<template>
  <a-modal
    title="表单"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
      <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
        <a-form @submit="handleSubmit" :form="form">
          <a-form-item
            label="标题"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-input
              v-decorator="[
                'name',
                {rules: [{ required: true, message: '请输入标题' }]}
              ]"
              name="name"
              placeholder="给目标起个名字" />
          </a-form-item>
          <a-form-item
            label="起止日期"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-range-picker
              name="buildTime"
              style="width: 100%"
              v-decorator="[
                'buildTime',
                {rules: [{ required: true, message: '请选择起止日期' }]}
              ]" />
          </a-form-item>
          <a-form-item
            label="目标描述"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-textarea
              rows="4"
              placeholder="请输入你阶段性工作目标"
              v-decorator="[
                'description',
                {rules: [{ required: true, message: '请输入目标描述' }]}
              ]" />
          </a-form-item>
          <a-form-item
            label="衡量标准"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-textarea
              rows="4"
              placeholder="请输入衡量标准"
              v-decorator="[
                'type',
                {rules: [{ required: true, message: '请输入衡量标准' }]}
              ]" />
          </a-form-item>
          <a-form-item
            label="客户"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-input
              placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
              v-decorator="[
                'customer',
                {rules: [{ required: true, message: '请描述你服务的客户' }]}
              ]" />
          </a-form-item>
          <a-form-item
            label="邀评人"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
            :required="false"
          >
            <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
          </a-form-item>
          <a-form-item
            label="权重"
            :labelCol="{lg: {span: 4}, sm: {span: 4}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
            :required="false"
          >
            <a-input-number :min="0" :max="100" />
            <span> %</span>
          </a-form-item>
          
        </a-form>
      </a-card>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,

      form: this.$form.createForm(this)
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$emit('ok', values)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
